/* 移动端和平板适配样式 */
/* 为小屏幕设备优化布局和视觉效果 */

/* 平板设备适配 (768px - 1199px) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* 全局容器调整 */
  .app-container {
    padding: 15px;
  }
  
  /* 卡片组件优化 */
  .el-card {
    margin-bottom: 20px;
    
    .el-card__header {
      padding: 14px 16px;
    }
    
    .el-card__body {
      padding: 16px;
    }
  }
  
  /* 表单优化 */
  .el-form {
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  
  /* 表格优化 */
  .el-table {
    .el-table__header-wrapper {
      th {
        padding: 10px 0;
        font-size: 13px;
      }
    }
    
    td, th {
      padding: 8px 0;
    }
  }
  
  /* 分页优化 */
  .pagination-container {
    margin-top: 20px;
    padding: 14px 0;
  }
  
  /* 弹窗优化 */
  .el-dialog {
    .el-dialog__header {
      padding: 14px 16px;
    }
    
    .el-dialog__body {
      padding: 20px 16px;
    }
    
    .el-dialog__footer {
      padding: 14px 16px;
    }
  }
  
  /* 抽屉优化 */
  .el-drawer {
    .el-drawer__header {
      padding: 14px 16px;
    }
    
    .el-drawer__body {
      padding: 16px;
    }
  }
}

/* 小屏幕设备适配 (小于768px) */
@media screen and (max-width: 767px) {
  /* 全局容器调整 */
  .app-container {
    padding: 10px;
  }
  
  /* 卡片组件优化 */
  .el-card {
    margin-bottom: 16px;
    
    .el-card__header {
      padding: 12px 14px;
    }
    
    .el-card__body {
      padding: 14px;
    }
  }
  
  /* 表单优化 */
  .el-form {
    .el-form-item {
      margin-bottom: 16px;
      
      .el-form-item__label {
        padding: 0 0 6px 0;
        display: block;
        text-align: left;
      }
      
      .el-form-item__content {
        display: block;
      }
    }
  }
  
  /* 表格优化 - 移动端响应式处理 */
  .el-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    
    .el-table__header-wrapper {
      th {
        padding: 8px 0;
        font-size: 12px;
      }
    }
    
    .el-table__body-wrapper {
      td {
        padding: 6px 0;
        font-size: 12px;
      }
    }
  }
  
  /* 分页优化 */
  .pagination-container {
    margin-top: 16px;
    padding: 12px 0;
    
    .el-pagination {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      
      .el-pager {
        margin: 0 5px;
      }
      
      .btn-prev,
      .btn-next {
        padding: 0;
        min-width: 30px;
      }
      
      li {
        min-width: 30px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
      }
    }
  }
  
  /* 弹窗优化 */
  .el-dialog {
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    .el-dialog__header {
      padding: 12px 14px;
    }
    
    .el-dialog__body {
      padding: 16px 14px;
    }
    
    .el-dialog__footer {
      padding: 12px 14px;
    }
  }
  
  /* 抽屉优化 */
  .el-drawer {
    width: 95% !important;
    
    .el-drawer__header {
      padding: 12px 14px;
    }
    
    .el-drawer__body {
      padding: 14px;
    }
  }
  
  /* 标签页优化 */
  .el-tabs {
    .el-tabs__header {
      margin-bottom: 15px;
    }
    
    .el-tabs__item {
      padding: 0 15px;
      font-size: 13px;
    }
  }
  
  /* 按钮优化 */
  .el-button {
    padding: 7px 14px;
    font-size: 13px;
    
    &.el-button--small {
      padding: 5px 10px;
      font-size: 12px;
    }
    
    &.el-button--large {
      padding: 9px 16px;
      font-size: 14px;
    }
  }
  
  /* 面包屑优化 */
  .app-breadcrumb.el-breadcrumb {
    font-size: 13px;
    line-height: 40px;
    margin-left: 5px;
  }
  
  /* 工具类调整 */
  .mt5 { margin-top: 3px; }
  .mr5 { margin-right: 3px; }
  .mb5 { margin-bottom: 3px; }
  .ml5 { margin-left: 3px; }
  
  .mt10 { margin-top: 6px; }
  .mr10 { margin-right: 6px; }
  .mb10 { margin-bottom: 6px; }
  .ml10 { margin-left: 6px; }
  
  .mt20 { margin-top: 12px; }
  .mr20 { margin-right: 12px; }
  .mb20 { margin-bottom: 12px; }
  .ml20 { margin-left: 12px; }
  
  /* 响应式隐藏 */
  .hidden-sm {
    display: none !important;
  }
  
  /* 响应式显示 */
  .visible-sm {
    display: block !important;
  }
  
  /* 文本对齐 */
  .text-center-sm {
    text-align: center;
  }
  
  .text-right-sm {
    text-align: right;
  }
  
  /* 弹性布局 */
  .flex-column-sm {
    flex-direction: column;
  }
  
  .gap-10-sm {
    gap: 10px;
  }
}

/* 超小屏幕设备适配 (小于480px) */
@media screen and (max-width: 479px) {
  /* 全局容器调整 */
  .app-container {
    padding: 8px;
  }
  
  html {
    font-size: 14px;
  }

  body {
    font-size: 12px;
  }
  
  /* 卡片组件优化 */
  .el-card {
    margin-bottom: 12px;
    
    .el-card__header {
      padding: 10px 12px;
      font-size: 14px;
    }
    
    .el-card__body {
      padding: 12px;
    }
  }
  
  /* 表单优化 */
  .el-form {
    .el-form-item {
      margin-bottom: 14px;
      
      .el-form-item__label {
        padding: 0 0 6px 0;
        display: block;
        text-align: left;
        font-size: 12px;
      }
      
      .el-form-item__content {
        display: block;
        font-size: 12px;
      }
    }
  }
  
  /* 表格优化 */
  .el-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 11px;
    
    .el-table__header-wrapper {
      th {
        padding: 6px 0;
        font-size: 11px;
      }
    }
    
    .el-table__body-wrapper {
      td {
        padding: 5px 0;
        font-size: 11px;
      }
    }
  }
  
  /* 分页优化 */
  .pagination-container {
    margin-top: 14px;
    padding: 10px 0;
    font-size: 12px;
    
    .el-pagination {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      font-size: 12px;
      
      .el-pager {
        margin: 0 5px;
      }
      
      .btn-prev,
      .btn-next {
        padding: 0;
        min-width: 30px;
      }
      
      li {
        min-width: 30px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
      }
    }
  }
  
  /* 弹窗优化 */
  .el-dialog {
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    .el-dialog__header {
      padding: 12px 14px;
    }
    
    .el-dialog__title {
      font-size: 16px;
    }
    
    .el-dialog__body {
      padding: 16px 14px;
      font-size: 12px;
    }
    
    .el-dialog__footer {
      padding: 12px 14px;
    }
  }
  
  /* 抽屉优化 */
  .el-drawer {
    width: 95% !important;
    
    .el-drawer__header {
      padding: 12px 14px;
      font-size: 16px;
    }
    
    .el-drawer__body {
      padding: 14px;
    }
  }
  
  /* 标签页优化 */
  .el-tabs {
    .el-tabs__header {
      margin-bottom: 15px;
    }
    
    .el-tabs__item {
      padding: 0 15px;
      font-size: 13px;
    }
  }
  
  /* 按钮优化 */
  .el-button {
    padding: 6px 12px;
    font-size: 12px;
    
    &.el-button--small {
      padding: 4px 8px;
      font-size: 11px;
    }
    
    &.el-button--large {
      padding: 8px 14px;
      font-size: 13px;
    }
  }
  
  /* 面包屑优化 */
  .app-breadcrumb.el-breadcrumb {
    font-size: 12px;
    line-height: 36px;
    margin-left: 5px;
  }
  
  /* 工具类调整 */
  .mt5 { margin-top: 2px; }
  .mr5 { margin-right: 2px; }
  .mb5 { margin-bottom: 2px; }
  .ml5 { margin-left: 2px; }
  
  .mt10 { margin-top: 4px; }
  .mr10 { margin-right: 4px; }
  .mb10 { margin-bottom: 4px; }
  .ml10 { margin-left: 4px; }
  
  .mt20 { margin-top: 8px; }
  .mr20 { margin-right: 8px; }
  .mb20 { margin-bottom: 8px; }
  .ml20 { margin-left: 8px; }
  
  /* 响应式隐藏 */
  .hidden-xs {
    display: none !important;
  }
}

/* 移动端特有的交互优化 */
@media screen and (max-width: 767px) {
  /* 表格滚动提示 */
  .table-responsive {
    position: relative;
    
    &::after {
      content: "← 左右滑动查看完整表格 →";
      position: absolute;
      bottom: -25px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #909399;
      animation: scrollTip 2s ease-in-out infinite;
    }
  }
  
  @keyframes scrollTip {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
  
  /* 按钮组垂直排列 */
  .el-button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    .el-button {
      width: 100%;
    }
  }
  
  /* 表单元素宽度 */
  .el-input,
  .el-select,
  .el-date-editor {
    width: 100%;
  }
  
  /* 卡片标题换行 */
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  /* 搜索框优化 */
  .filter-container {
    .filter-item {
      display: block;
      margin-bottom: 10px;
      
      .el-input,
      .el-select {
        width: 100%;
      }
    }
  }
}